<template>

    <div class="top">
          <div class="tou">
      <img src="../../assets/fh.png" alt="" @click="goback" />
      <h3>影院详情</h3>
    </div>
    


         <div class="tit">
         
        <p>   奥斯卡影城又一城店</p>
        <span>高新区科学大道89号升龙又一城广场3楼
        </span>
        </div>
             <hr >

    <div class="wrapper" ref="wrapper"> 
        <ul class="content">
            <li v-for="item in top" :key="item.id">
                 <div class="img">
                     <img :src="item.img" alt="">
                     <span>{{item.sc}}</span>
                 </div>
                 <div class="text">
                     <div class="nm" >
                        <p><span class="toplist">
                            {{item.top}}
                            </span>{{item.nm}}</p>
                     </div>
                     <p class="star">
                         {{item.star}}
                     </p>
                     <p class="star">
                         {{item.rt}}
                     </p>
                 </div>
                 <div class="right">
                     <span>{{item.sc}}</span>
              
                     <button>购票</button>
                 </div>
            </li>
        </ul>

       </div>
        </div>
</template>

<script>
import axios from "axios";

export default {
    data(){
        return{
            top:[],
            cinemas:cinemass
        };
    },
    created(){
        this.getData();
        console.log(this.$route.params.id);
        
    },
    methods:{
        getData(){
            axios.get("/api/top.json")
            .then(res => {
              console.log(res.data);
              this.top=res.data.top
            })
            .catch(err => {
                console.error(err); 
            });
        },
        goback(){
          this.$router.go(-1);
        }
    },
    mounted(){
      this.getData();
    }
    
}
</script>

<style scoped>
.top{
    background-color: white;
    margin: 0 auto;
  width: 90%;
    /* text-align: center; */
}
.tou {
  width: 100%;
  background: white;
  float: left;
  height: 40px;
  position: fixed;
  top: 0;
  /* background-color: #666; */
}
.tou > img {
  width: 18px;
  float: left;
  margin-top: 15px;
  /* margin-left: 5px; */
}
.tou > h3 {
  float: left;
  margin: 7px 0px 0px 125px;
 color: #663529;
      /* font-size: 22px; */
      /* font-weight: bold; */
}
.tit{
    color: #000;
    text-align: left;
    margin-top: 40px;
    margin-bottom: 20px;
}
.tit>p{
    padding-left: 5px;
      font-size: 20px;
      font-weight: bold;
}
.tit>span{
    color: #666;
    font-size: 15px;
    
}

.nm{
    color: #000;
      display: inline-block;
    padding-left: 5px;
      font-size: 18px;
      font-weight: bold;
      vertical-align: middle;
}
.toplist{
    color: red;
    padding-right: 5px;
    font-size: 18px;
}


.star { 
  width: 180px;/* 一定要设置宽度，或者元素内含的百分比*/
  overflow: hidden; /*溢出的部分隐藏*/
  white-space: nowrap;/* 文本不换行 */
  text-overflow: ellipsis;
  padding-left: 5px;
    color: rgb(114, 113, 113);
  font-size: 14px;
}
ul.content {
  padding-left: 0px;
}
ul.content > li {
  list-style: none;
}
.img {
  text-align: left;
  float: left;
  position: relative;
}
.img > img {
  width: 70px;
  height: 100px;
  padding-right: 10px;
}
.img>span{
    font-size:15px ;
       color: white;
    background-color: rgb(221,121,7,0.70);
    position: absolute;
    bottom:4.5px;
    z-index: 100px;
    display: block;
    width: 70px;
    text-align: right;

}
li {
  width: 100%;
  float: left;
  padding-bottom: 10px;
}
.text {
  float: left;
  text-align: left;
  width: 57%;
}
p {
  margin: 10px 5px 7px 0px;
}


button {
  float: right;
  background:red;
  color: white;
  border-radius: 4px;
  border: 0;
  width: 50px;
  height: 30px;
  margin-top: 20px;
}

</style>